{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>StudentsWithPage</title>
    <link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">
    <script type="text/javascript" src="{% static 'js/plugin/jquery-3.7.1.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/plugin/bootstrap.js' %}"></script>
</head>
<body>

<ul>
    {% for student in page_object.object_list %}
        <li>姓名:{{ student.name }} 和 年龄:{{ student.age }}</li>
    {% endfor %}
</ul>

<nav aria-label="...">
    <ul class="pagination">
        {% if page_object.has_previous %}
            <li class="page-item">
                <a class="page-link" href="{% url 'app:get_students_with_page' %}?page={{ page_object.previous_page_number }}">Previous</a>
            </li>
        {% else %}
            <li class="page-item disabled"><span class="page-link">Previous</span></li>
        {% endif %} 
        {% for page_index in page_range %}
            {% if page_index == page_object.number %}
                <li aria-current="page" class="page-item active">
                    <a class="page-link" href="{% url 'app:get_students_with_page' %}?page={{ page_index }}">{{ page_index }}</a>
                </li>
            {% else %}
                <li class="page-item">
                    <a class="page-link" href="{% url 'app:get_students_with_page' %}?page={{ page_index }}">{{ page_index }}</a>
                </li>
            {% endif %}
        {% endfor %}  {# has_next #}
        {% if page_object.has_next %}
            <li class="page-item">
                <a class="page-link" href="{% url 'app:get_students_with_page' %}?page={{ page_object.next_page_number }}">Next</a>
            </li>
        {% else %}
            <li class="page-item disabled"><span class="page-link">Next</span></li>
        {% endif %}
    </ul>
</nav>
</body>
</html>